<template>
  <view class="page-section page-section-spacing swiper">
    <swiper
      :style="{ height: '476rpx' }"
      circular="true"
      autoplay="true"
      @change="changeIndex"
    >
      <block v-for="(item, index) in imgs" :key="index">
        <swiper-item>
          <image :src="item" :data-id="index" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <view class="swiper-num">{{ current + 1 }} / {{ imgs.length }}</view>
  </view>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    imgs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    changeIndex(e) {
      this.current = e.detail.current
    }
  }
}
</script>

<style>
.swiper {
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper image {
  width: 100%;
  height: 100%;
}
.swiper-num {
  position: absolute;
  right: 10px;
  bottom: 20px;
  border-radius: 20px;
  width: 80px;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
}
</style>
